<template>
  <div class="app-container">
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="httpFileUploadUrl"
      :headers="headers"
      :limit="1"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :on-success="uploadFileSuccess"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button
        class="ml-3"
        type="success"
        style="margin-left: 10px"
        @click="submitUpload"
      >
        点击导入
      </el-button>
      <template #tip>
        <div class="el-upload__tip text-red">
          <span>只能上传一个xls,,xlsx,csv文件</span>
        </div>
      </template>
    </el-upload>
    <el-row :gutter="10" style="padding: 10px">
      <el-button-group>
        <el-button type="primary" icon="plus" @click="handleFilter"
          >去重处理</el-button
        >
        <el-button
          type="primary"
          icon="edit"
          class="el-button-modify"
          @click="handleBatch"
          >批量核验</el-button
        >
      </el-button-group>
    </el-row>
    <el-table
      ref="gridtable"
      v-loading="tableloading"
      :data="tableData"
      stripe
      highlight-current-row
      style="width: 100%"
      :v-loading="isLoading"
    >
      <el-table-column prop="InvoiceNo" label="发票号" sortable="custom" />
      <el-table-column
        prop="Money"
        label="发票金额"
        sortable="custom"
        width="220"
      />
      <el-table-column
        prop="InvoiceDate"
        label="发票日期"
        sortable="custom"
        width="220"
      />
      <el-table-column
        prop="invoiceResult"
        label="核对状态"
        sortable="custom"
        width="220"
      />
    </el-table>
  </div>
</template>
<script setup name="importInvoices">
import defaultSettings from "@/settings";
import { getToken } from "@/utils/auth";

import {
  importInvoices,
  filterInvoices,
  batchInvoices,
} from "@/api/security/thinvoiceservice";
const httpFileUploadUrl = ref(defaultSettings.fileUploadUrl);

const { proxy } = getCurrentInstance();
const headers = ref([]);

const tableloading = ref(false);
const isLoading = ref(false);
const tableData = ref([]);

const data = reactive({
  queryParams: {
    Keywords: "",
  },
});

const { queryParams } = toRefs(data);

created();
const beforeUpload = (file) => {
  let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
  if (fileType != "xls" && fileType != "xlsx" && fileType != "csv") {
    proxy.$message.error("只能上传xls,xlsx,csv文件");
    return false;
  }
};

const submitUpload = () => {
  proxy.$refs.upload.submit();
};

function created() {
  headers.value = { Authorization: "Bearer " + (getToken() || "") };
}

function handleBatch() {
  if (tableData.value.length == 0) {
    proxy.$message.error("请选择要批量导入的Excel文件");
    return;
  }
  isLoading.value = true;
  batchInvoices(tableData.value).then((res) => {
    tableData.value = res.ResData;
    isLoading.value = false;
  });
}

function handleFilter() {
  if (tableData.value.length == 0) {
    proxy.$message.error("请选择要去重导入的Excel文件");
    return;
  }
  isLoading.value = true;
  filterInvoices(tableData.value).then((res) => {
    tableData.value = res.ResData;
    isLoading.value = false;
  });
}

function uploadFileSuccess(response, file, fileList) {
  var fileUrl = response.ResData.FilePath;
  queryParams.value.Keywords = fileUrl;
  tableloading.value = true;
  importInvoices(queryParams.value).then((res) => {
    tableData.value = res.ResData;
    tableloading.value = false;
  });
}
</script>
  <style lang="scss" scoped>
.yuebon-setting-form .el-input {
  width: 40%;
}
.yuebon-setting-form .el-select .el-input {
  width: 100%;
}
</style>
  